<template>
  <div class="background">
    <Header></Header>
    <div class="content">
      <h1>在线编辑博客</h1>
      <el-form :model="blogForm" :rules="rules" ref="blogForm" label-width="170px">
        <el-form-item label="标题" prop="blogTitle">
          <el-input v-model="blogForm.blogTitle"></el-input>
        </el-form-item>
        <el-form-item label="请选择博客类型:" prop="blogType">
          <el-select v-model="blogForm.blogType" placeholder="请选择博客类型">
            <el-option v-for="(item,index) in blogTypes" :label="item.typeName" :value="item.typeName" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文档简介" prop="blogRemark">
          <el-input type="textarea" v-model="blogForm.blogRemark" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="封面上传">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            action="http://localhost:8084/uploadCover"
            class="avatar-uploader">
            <img :src="blogForm.blogImage">
            <el-button type="primary" round>点击上传图片</el-button>
          </el-upload>
        </el-form-item>
        <quillEditor v-model="blogForm.blogContent"
                     ref="myQuillEditor"
                     :options="editorOption"
                     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                     @change="onEditorChange($event)"></quillEditor>
        <hr>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">上传博客</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '../common/Header'
import Footer from '../common/Footer'
import { quillEditor } from 'vue-quill-editor'
import 'babel-polyfill' // es6 shim
import myUpload from 'vue-image-crop-upload'
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
export default {
  name: 'BlogEdit',
  components: {
    Header,
    Footer,
    quillEditor,
    // eslint-disable-next-line vue/no-unused-components
    'my-upload': myUpload
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    },
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  data () {
    return {
      blogForm: {
        blogTitle: '',
        blogImage: '',
        blogContent: '<h3>请在此输入博客内容</h3>',
        blogType: '',
        blogRemark: '',
        author: ''
      },
      rules: {
        blogTitle: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 25,
            message: '长度在 3 到 25 个字符',
            trigger: 'blur'
          }
        ],
        blogType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }
        ],
        blogRemark: [
          {
            required: true,
            message: '请填写文档简介',
            trigger: 'blur'
          }
        ]
      },
      blogTypes: [],
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'] // 清除字体样式
          ]
        }
      },
      dialogImageUrl: '',
      dialogVisible: false,
      user: null
    }
  },
  methods: {
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    getBlogType () {
      this.$axios.get('/types', {}).then((res) => {
        this.blogTypes = res.data.data
      })
    },
    onEditorBlur (even) {
    },
    onEditorFocus (even) {
    },
    onEditorChange (even) {
    },
    // 提交博客
    onSubmit () {
      this.blogForm.author = this.userInfo.name
      this.$axios
        .post('/blog/save', this.blogForm).then(response => {
          this.$message.success('提交成功')
          // this.getBlogById ()
          this.$router.push('/')
        })
    },
    // 图片上传成功调用
    handleAvatarSuccess (res, file) {
      this.blogForm.blogImage = res
    },
    // 图片上传之前调用
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isJPG && isLt2M
    },
    cancel () {
      this.blogForm = {}
    },
    getBlogById () {
      const blogId = this.$route.params.blogId
      this.$axios.get('/blog/' + blogId, { params: { isEdit: true } }).then((res) => {
        this.blogForm = res.data.data
      })
    }
  },
  created () {
    if (this.$route.params.blogId != null) {
      this.getBlogById()
    }
    this.getBlogType()
  },
  mounted () {

  }
}
</script>
<style>
  .content {
    width: 80%;
    margin: 50px auto;
    /*text-align: center;*/
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
